<template lang="pug">
  .echartBox#areaEchartsBox(style="height: 300px")
</template>
<script>
import echartMixin from '@/mixins/echarts'
import '../index.scss'
import '../../../../../../node_modules/echarts/map/js/china.js' // 引入中国地图数据
export default {
  mixins: [echartMixin],
  data () {
    return {
      echartsId: 'areaEchartsBox'
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      const data = [
        { gardenName: '某某幼儿园', value: 423 },
        { gardenName: '某某幼儿园', value: 513 },
        { gardenName: '某某幼儿园', value: 663 },
        { gardenName: '某某幼儿园', value: 323 }
      ]
      this.getEcharts(data)
    },
    getEcharts (values) {
      console.log(values)
      // const allValue = values.reduce((sum, cur) => {
      //   return sum + cur.value
      // }, 0)
      // const options = {
      //   xAxis: {
      //     type: 'category',
      //     data: values.map(x => x.gardenName)
      //   },
      //   yAxis: {
      //     type: 'value'
      //   },
      //   lineStyle: {
      //     color: '#5470C6'
      //   },
      //   itemStyle: {
      //     color: '#5470C6'
      //   },
      //   tooltip: {
      //     trigger: 'axis',
      //     backgroundColor: 'transparent',
      //     formatter: params => {
      //       const data = params[0]
      //       console.log(data)
      //       return `<div class="echartsTooltop"><h3>${data.name}</h3><p>学生: ${data.value}</p><p>占比: ${(data.value / allValue).toFixed(2) * 100 + '%'}</p></div>`
      //     }
      //   },
      //   series: [
      //     {
      //       data: values.map(x => x.value),
      //       type: 'line',
      //       smooth: true
      //     }
      //   ]
      // }

      const option = {
        tooltip: {
          show: false
        },
        geo: {
          map: 'china',
          roam: false, // 一定要关闭拖拽
          zoom: 1.23,
          center: [105, 36], // 调整地图位置
          label: {
            normal: {
              show: true, // 关闭省份名展示
              fontSize: '10'
            },
            emphasis: {
              show: false
            }
          }
        },
        series: [
          {
            type: 'map',
            map: 'china',
            roam: false,
            zoom: 1.23,
            center: [105, 36],
            // geoIndex: 1,
            // aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            }
          }
        ]
      }
      this.$_chartMixin_init(option)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
